<template>
    <div ref="loginModel" :class="{ 'login-model': loginIsShow }">
        <transition name="el-zoom-in-center">
            <div class="container" :class="{ 'right-panel-active': isSignUp }" ref="loginDialog" v-if="loginIsShow">
                <!-- 注册 -->
                <div class="container__form container--signup">
                    <el-form ref="registerFrom" :model="registerFrom" class="form">
                        <h2 class="form__title">Sign Up</h2>
                        <div class="wave-group">
                            <input required type="text" class="input1" v-model="registerFrom.account" autocomplete="off" @invalid="invalidMessage($event, '请输入账号')" @input="clearInvalidMessage">
                            <span class="bar"></span>
                            <label class="label">
                                <span class="label-char" style="--index: 0">A</span>
                                <span class="label-char" style="--index: 1">c</span>
                                <span class="label-char" style="--index: 2">c</span>
                                <span class="label-char" style="--index: 3">o</span>
                                <span class="label-char" style="--index: 4">u</span>
                                <span class="label-char" style="--index: 5">n</span>
                                <span class="label-char" style="--index: 6">t</span>
                            </label>
                        </div>
                        <div class="wave-group">
                            <input required type="password" class="input1" v-model="registerFrom.password" autocomplete="off" @invalid="invalidMessage($event, '请输入密码')" @input="clearInvalidMessage">
                            <span class="bar"></span>
                            <label class="label">
                                <span class="label-char" style="--index: 0">P</span>
                                <span class="label-char" style="--index: 1">a</span>
                                <span class="label-char" style="--index: 2">s</span>
                                <span class="label-char" style="--index: 3">s</span>
                                <span class="label-char" style="--index: 4">o</span>
                                <span class="label-char" style="--index: 5">r</span>
                                <span class="label-char" style="--index: 6">d</span>
                            </label>
                        </div>
                        <div class="wave-group">
                            <input required type="text" class="input1" v-model="registerFrom.email" autocomplete="off" @invalid="invalidMessage($event, '请输入正确的邮箱')" @input="clearInvalidMessage">
                            <span class="bar"></span>
                            <label class="label">
                                <span class="label-char" style="--index: 0">E</span>
                                <span class="label-char" style="--index: 1">m</span>
                                <span class="label-char" style="--index: 2">a</span>
                                <span class="label-char" style="--index: 3">i</span>
                                <span class="label-char" style="--index: 4">l</span>
                            </label>
                        </div>
                        <div class="wave-group">
                            <input required type="text" class="input1" maxlength="6" v-model="registerFrom.verifyCode" autocomplete="off" @invalid="invalidMessage($event, '请输入验证码')" @input="clearInvalidMessage">
                            <span class="bar"></span>
                            <label class="label">
                                <span class="label-char" style="--index: 0">v</span>
                                <span class="label-char" style="--index: 1">e</span>
                                <span class="label-char" style="--index: 2">r</span>
                                <span class="label-char" style="--index: 3">i</span>
                                <span class="label-char" style="--index: 4">f</span>
                                <span class="label-char" style="--index: 5">y</span>
                                <span class="label-char" style="--index: 6">_</span>
                                <span class="label-char" style="--index: 7">C</span>
                                <span class="label-char" style="--index: 8">o</span>
                                <span class="label-char" style="--index: 9">d</span>
                                <span class="label-char" style="--index: 10">e</span>
                            </label>
                            <span class="auth-code" @click="startTimer" :class="{ disabled: timerRunning }">{{ buttonText }}</span>
                        </div>
                        <button class="btn" @click="register">Sign Up</button>
                    </el-form>
                </div>
                <!-- 登入 -->
                <div class="container__form container--signin">
                    <!-- 账号密码登入 -->
                    <el-form ref="loginFrom" :model="loginFrom" class="form" v-if="loginFlag === '0'">
                        <h2 class="form__title">Sign In</h2>
                        <div class="wave-group">
                            <input required type="text" class="input1" v-model="loginFrom.account" autocomplete="off" @invalid="invalidMessage($event, '请输入账号')" @input="clearInvalidMessage">
                            <span class="bar"></span>
                            <label class="label">
                                <span class="label-char" style="--index: 0">A</span>
                                <span class="label-char" style="--index: 1">c</span>
                                <span class="label-char" style="--index: 2">c</span>
                                <span class="label-char" style="--index: 3">o</span>
                                <span class="label-char" style="--index: 4">u</span>
                                <span class="label-char" style="--index: 5">n</span>
                                <span class="label-char" style="--index: 6">t</span>
                            </label>
                        </div>
                        <div class="wave-group">
                            <input required type="password" class="input1" v-model="loginFrom.password" autocomplete="off" @invalid="invalidMessage($event, '请输入密码')" @input="clearInvalidMessage">
                            <span class="bar"></span>
                            <label class="label">
                                <span class="label-char" style="--index: 0">P</span>
                                <span class="label-char" style="--index: 1">a</span>
                                <span class="label-char" style="--index: 2">s</span>
                                <span class="label-char" style="--index: 3">s</span>
                                <span class="label-char" style="--index: 3">o</span>
                                <span class="label-char" style="--index: 3">r</span>
                                <span class="label-char" style="--index: 3">d</span>
                            </label>
                        </div>
                        <div class="wave-group">
                            <input required  class="input1" maxlength="4" v-model="loginFrom.verifyCode" autocomplete="off" @invalid="invalidMessage($event, '请输入验证码')" @input="clearInvalidMessage">
                            <span class="bar"></span>
                            <label class="label">
                                <span class="label-char" style="--index: 0">V</span>
                                <span class="label-char" style="--index: 1">e</span>
                                <span class="label-char" style="--index: 2">i</span>
                                <span class="label-char" style="--index: 3">f</span>
                                <span class="label-char" style="--index: 4">y</span>
                                <span class="label-char" style="--index: 4">_</span>
                                <span class="label-char" style="--index: 5">C</span>
                                <span class="label-char" style="--index: 6">o</span>
                                <span class="label-char" style="--index: 7">d</span>
                                <span class="label-char" style="--index: 8">e</span>
                            </label>
                            <img :src="imgPath" class="verifyCode" @click="getVerifyCode()"/>
                        </div>
                        <a href="#" class="link">忘记密码了?</a>
                        <button class="btn" @click="login()">Sign In</button>
                        <div class="otherLogin">
                            <span class="email" @click="checkLoginMode(dict.loginFlag[1].value)"></span>
                            <span class="qq" @click="checkLoginMode(dict.loginFlag[2].value)"></span>
                        </div>
                    </el-form>

                    <!-- 邮箱登入 -->
                    <el-form ref="loginFrom" :model="loginFrom" class="form" v-if="loginFlag === '1'">
                        <h2 class="form__title">Sign In</h2>
                        <div class="wave-group">
                            <input required type="text" class="input1" v-model="loginFrom.email" autocomplete="off" @invalid="invalidMessage($event, '请输入正确的邮箱')" @input="clearInvalidMessage">
                            <span class="bar"></span>
                            <label class="label">
                                <span class="label-char" style="--index: 0">E</span>
                                <span class="label-char" style="--index: 1">m</span>
                                <span class="label-char" style="--index: 2">a</span>
                                <span class="label-char" style="--index: 3">i</span>
                                <span class="label-char" style="--index: 4">l</span>
                            </label>
                        </div>
                        <div class="wave-group">
                            <input required type="text" class="input1" maxlength="6" v-model="loginFrom.verifyCode" autocomplete="off" @invalid="invalidMessage($event, '请输入验证码')" @input="clearInvalidMessage">
                            <span class="bar"></span>
                            <label class="label">
                                <span class="label-char" style="--index: 0">A</span>
                                <span class="label-char" style="--index: 1">u</span>
                                <span class="label-char" style="--index: 2">t</span>
                                <span class="label-char" style="--index: 3">h</span>
                                <span class="label-char" style="--index: 4">_</span>
                                <span class="label-char" style="--index: 5">C</span>
                                <span class="label-char" style="--index: 6">o</span>
                                <span class="label-char" style="--index: 7">d</span>
                                <span class="label-char" style="--index: 8">e</span>
                            </label>
                            <span class="auth-code" @click="startTimerLogin" :class="{ disabled: timerRunning }">{{ buttonText }}</span>
                        </div>
                        <button class="btn" @click="emailLogin()">Sign In</button>
                        <div class="otherLogin">
                            <span class="account" @click="checkLoginMode(dict.loginFlag[0].value)"></span>
                            <span class="qq" @click="checkLoginMode(dict.loginFlag[2].value)"></span>
                        </div>
                    </el-form>
                </div>
                <!-- 切换副框 -->
                <div class="container__overlay">
                    <div class="overlay">
                        <div class="overlay__panel overlay--left"><button class="btn" id="signIn"
                                @click="removePanelActive">Sign
                                In</button></div>
                        <div class="overlay__panel overlay--right"><button class="btn" id="signUp"
                                @click="addPanelActive">Sign
                                Up</button></div>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
import { v4 as uuidv4 } from 'uuid';
import {register, sendRegisterEmail, sendLoginEmail, emailLogin} from '~/api/user'
export default {
    data() {
        return {
            uuid: '',
            registerUUID: '',
            loginUUID: '',
            countdown: 60,
            timerRunning: false,
            timer: null,
            isSignUp: false,
            loginFrom: {
                email: '',
                account: '',
                password: ''
            }, // 登入实体类
            registerFrom: {
                email: '',
                account: '',
                password: '',
                verifyCode: ''
            }, // 注册实体类
            loginFlag: '0', // 0 账号密码登入 1 邮箱登入 2 qq 登入
            imgPath: ''
        }
    },
    props: ['loginButton'],
    computed: {
        loginIsShow() {
            this.getVerifyCode()
            return this.$store.getters.loginIsShow;
        },
        buttonText() {
            return this.timerRunning ? `${this.countdown} s` : '发送验证码';
        },
    },
    methods: {
        register(){
            if(!this.validateEmail(this.registerFrom.email)){
                this.registerFrom.email = '';
            }
            if(!this.registerFrom.account || !this.registerFrom.password || !this.registerFrom.verifyCode || !this.registerFrom.email){
                return;
            }
            this.registerFrom.uuid = this.registerUUID
            register(this.registerFrom).then(res => {
                if(res.data){
                    this.$message.success("注册成功!")
                    this.removePanelActive()
                }else {
                    this.$message.success("注册失败!")
                }
                this.uuid = ''
            }).catch(error => {
                this.uuid = ''
            })
        },
        emailLogin(){
            this.loginFrom.uuid = this.loginUUID
            this.$store.dispatch('user/emailLogin', this.loginFrom).then(res => {
                this.$message.success("登入成功！")
                this.$store.dispatch('user/updateLoginStatus', false)
                document.body.style.overflow = "auto";
                this.clearForm()
                this.$store.dispatch("user/getInfo")
            })
        },

        login(){
            if(this.loginFlag === this.dict.loginFlag[1].value){
                if(!this.validateEmail(this.loginFrom.email)){
                    this.loginFrom.email = '';
                }
            }
            if(!this.loginFrom.account || !this.loginFrom.password || !this.loginFrom.verifyCode){
                return;
            }
            this.loginFrom.uuid = this.uuid
            this.$store.dispatch('user/login', this.loginFrom).then(() => {
                this.$message.success("登入成功！")
                this.$store.dispatch('user/updateLoginStatus', false)
                document.body.style.overflow = "auto";
                this.clearForm()
                this.$store.dispatch("user/getInfo")
            }).catch(error => {
                this.getVerifyCode()
            })
            // console.log(this.$store)
            // this.getVerifyCode()
        },
        getVerifyCode(){
            this.getUUID()
            this.imgPath = "http://127.0.0.1:3000/dev-api/auth/verifyCode/" + this.uuid
        },
        clearForm(){
            this.loginFrom.email = '';
            this.loginFrom.account = '';
            this.loginFrom.password = '';
            this.loginFrom.verifyCode = '';
        },
        clearInvalidMessage(event) {
            event.target.setCustomValidity(''); // 清空自定义提示信息
        },
        invalidMessage(event, message){
            event.target.setCustomValidity(message);
        },
        validateEmail(email) {
            // 简单的邮箱格式验证
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            return emailRegex.test(email);
        },
        checkLoginMode(value){
            this.loginFlag = value
            this.clearForm()
        },
        addPanelActive() {
            this.isSignUp = true
        },
        removePanelActive() {
            this.isSignUp = false
        },
        closeDialog(event) {
            if (this.loginIsShow) {
                const target = event.target;
                // const searchButton = this.$refs.searchButton;
                const loginModel = this.$refs.loginModel;
                // 当点击位置不是搜索图标和对话框时，才会触发
                if (target === loginModel) {
                    // 关闭对话框
                    // this.dialogFormVisible = false;
                    this.$store.dispatch('user/updateLoginStatus', false)
                    document.body.style.overflow = "auto";
                    this.clearForm()
                    this.registerFrom = {}
                }
            }
        },
        sendRegisterEmail(){
            this.registerUUID = uuidv4()
            this.$message.success("验证码正在发送，请稍等...")
            sendRegisterEmail(this.registerFrom.email, this.registerUUID).then(res => {
                if(res.data){
                    this.$message.success("验证码已发送至您的邮箱！")
                }else {
                    this.$message.success("验证码发送失败！")
                    return
                }
            })
        },
        async sendLoginEmail(){
            this.loginUUID = uuidv4()
            this.$message.success("验证码正在发送，请稍等..." + this.loginFrom.email)
            await sendLoginEmail(this.loginFrom.email, this.loginUUID).then(res => {
                if(res.data){
                    this.$message.success("验证码已发送至您的邮箱！")
                }else {
                    this.$message.success("验证码发送失败！")
                }
            })
        },
        // 验证码倒计时
        startTimer() {
            if (this.timerRunning) {
                return;
            }
            this.sendRegisterEmail()
            this.timerRunning = true;
            this.timer = setInterval(() => {
                if (this.countdown > 0) {
                this.countdown--;
                } else {
                clearInterval(this.timer);
                this.timerRunning = false;
                this.countdown = 60;
                }
            }, 1000);
        },
        getUUID(){
            this.uuid = uuidv4();
        },
        startTimerLogin(){
            if (this.timerRunning) {
                return;
            }
            this.sendLoginEmail()
            this.timerRunning = true;
            this.timer = setInterval(() => {
                if (this.countdown > 0) {
                this.countdown--;
                } else {
                clearInterval(this.timer);
                this.timerRunning = false;
                this.countdown = 1;
                }
            }, 1000);
        },
    },
    mounted() {
        document.addEventListener('click', this.closeDialog);
    },
    beforeDestroy() {
        document.removeEventListener('click', this.closeDialog);
        if (this.timer) {
            clearInterval(this.timer);
        }
    },
}
</script>


<style scoped>
.verifyCode{
    width: 80px;
    height: 40px;
    float: right;
    margin-top: -21%;
    margin-right: -10%;
}
.disabled {
  pointer-events: none; 
  opacity: 0.6;
}
.auth-code {
    float: right;
    margin-top: -13%;
    margin-right: -9%;
    font-size: 14px;
}
.qq, .email, .account {
    display: inline-block;
    width: 26px;
    height: 26px;
    margin-right: 5px;
    margin-top: 15px;
}

.account {
    background: url(~/assets/img/a_1.png);
    background-size: cover;
}

.qq {
    background: url(~/assets/img/qq_1.png);
    background-size: cover;
}

.email {
    background: url(~/assets/img/mail_1.png);
    /* background: url(~/assets/img/mail.png); */
    background-size: cover;
}

.account:hover{
    background: url(~/assets/img/a_2.png);
    background-size: cover;
}

.qq:hover{
    background: url(~/assets/img/qq_2.png);
    background-size: cover;
}

.email:hover{
    background: url(~/assets/img/mail_2.png);
    background-size: cover;
}

.wave-group {
    position: relative;
    margin-bottom: 20px;
}

.wave-group .input1 {
    font-size: 16px;
    padding: 10px 10px 10px 5px;
    display: block;
    width: 110%;
    border: none;
    border-bottom: 1px solid #515151;
    background: transparent;
}

.wave-group .input1:focus {
    outline: none;
    border-bottom: none;
}

.wave-group .label {
    color: #999;
    font-size: 18px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 5px;
    top: 10px;
    display: flex;
}

.wave-group .label-char {
    transition: 0.2s ease all;
    transition-delay: calc(var(--index) * .05s);
}

.wave-group .input1:focus~label .label-char,
.wave-group .input1:valid~label .label-char {
    transform: translateY(-20px);
    font-size: 14px;
    color: #5264AE;
}

.wave-group .bar {
    position: relative;
    display: block;
    width: 110%;
}

.wave-group .bar:before,
.wave-group .bar:after {
    content: '';
    height: 2px;
    width: 0;
    bottom: 1px;
    position: absolute;
    background: #5264AE;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
}

.wave-group .bar:before {
    left: 50%;
}

.wave-group .bar:after {
    right: 50%;
}

.wave-group .input1:focus~.bar:before,
.wave-group .input1:focus~.bar:after {
    width: 50%;
}

.login-model {
    position: sticky;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 1000rem;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}



.form__title {
    font-weight: 300;
    margin: 0;
    margin-bottom: 1.25rem;
}

.link {
    color: #333;
    font-size: 0.9rem;
    /* margin: 1.5rem 0; */
    text-decoration: none;
}

.container {
    background-color: white;;
    border-radius: 0.7rem;
    box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25), 0 0.7rem 0.7rem rgba(0, 0, 0, 0.22);
    height: 420px;
    max-width: 758px;
    overflow: hidden;
    position: relative;
    top: 100px;
    left: 400px;
    width: 100%;

}

.container__form {
    height: 100%;
    position: absolute;
    top: 0;
    transition: all 0.6s ease-in-out;
}

.container--signin {
    left: 0;
    width: 50%;
    z-index: 2;
}

.container.right-panel-active .container--signin {
    transform: translateX(100%);
}

.container--signup {
    left: 0;
    opacity: 0;
    width: 50%;
    z-index: 1;
}

.container.right-panel-active .container--signup {
    animation: show 0.6s;
    opacity: 1;
    transform: translateX(100%);
    z-index: 5;
}

.container__overlay {
    height: 100%;
    left: 50%;
    overflow: hidden;
    position: absolute;
    top: 0;
    transition: transform 0.6s ease-in-out;
    width: 50%;
    z-index: 100;
}

.container.right-panel-active .container__overlay {
    transform: translateX(-100%);
}

.overlay {
    background-color: #008997;
    background: url(~/assets/img/wallhaven-wqery6-light.webp);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    left: -100%;
    position: relative;
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
    width: 200%;
}

.container.right-panel-active .overlay {
    transform: translateX(50%);
}

.overlay__panel {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    position: absolute;
    text-align: center;
    top: 0;
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
    width: 50%;
}

.overlay--left {
    transform: translateX(-20%);
}

.container.right-panel-active .overlay--left {
    transform: translateX(0);
}

.overlay--right {
    right: 0;
    transform: translateX(0);
}

.container.right-panel-active .overlay--right {
    transform: translateX(20%);
}

.btn {
    background-color: #0367a6;
    background-image: linear-gradient(90deg, #0367a6 0%, #008997 74%);
    border-radius: 20px;
    border: 1px solid #0367a6;
    color: white;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: bold;
    letter-spacing: 0.1rem;
    padding: 0.9rem 4rem;
    text-transform: uppercase;
    transition: transform 80ms ease-in;
}

.form>.btn {
    margin-top: 1.5rem;
}

.btn:active {
    transform: scale(0.95);
}

.btn:focus {
    outline: none;
}

.form {
    /* background: url(~/assets/img/wallhaven-wqery6-dark.webp); */
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 3rem;
    height: 100%;
    text-align: center;
}

.input {
    background-color: #fff;
    border: none;
    padding: 0.9rem 0.9rem;
    margin: 0.5rem 0;
    width: 100%;
}

@keyframes show {

    0%,
    49.99% {
        opacity: 0;
        z-index: 1;
    }

    50%,
    100% {
        opacity: 1;
        z-index: 5;
    }
}
</style>